<script setup lang='ts'>
import { getAuthList } from '~/api/system/menu'
import type { MenuVO, RoleAuthResultVo, RoleCheckedAuthVo } from '~/api/system/menu/types.ts'
import { editRoleAuth } from '~/api/system/role'

const props = defineProps({
  roleId: {
    type: [Number, String],
  },
})

const saveFrom = reactive<RoleAuthResultVo>({
  projectIds: [],
  list: [] as any[],
})

const activeTabs = ref(0)

const panelTitle = ref<MenuVO[]>([])

onMounted(() => {
  getAll()
})

const roleMenu = ref<[RoleCheckedAuthVo[]]>([[]])

async function getAll() {
  const res = await getAuthList(props.roleId as string)
  saveFrom.list = res.data.list
  roleMenu.value = res.data.list
  panelTitle.value = res.data.menus
  console.log(res.data)
}

function queryCheckBoxChange(e: any, item: RoleCheckedAuthVo) {
  if (e.target.checked)
    item.queryCheckedList = item.queryList.map(data => data.menuId as string)
  else
    item.queryCheckedList = []
}
function operateCheckBoxChange(e: any, item: RoleCheckedAuthVo) {
  if (e.target.checked)
    item.operateCheckedList = item.operateList.map(data => data.menuId as string)
  else
    item.operateCheckedList = []
}

async function submit() {
  saveFrom.list = roleMenu.value
  await editRoleAuth(props.roleId as number, saveFrom)
}

defineExpose({ submit })
</script>

<template>
  <div class="role-auth">
    <a-tabs v-model:active-key="activeTabs" class="role-auth" :border="false">
      <a-tab-pane v-for="(panel, index) in panelTitle" :key="index" :tab="panel.menuName">
        <div class="select-content">
          <div v-for="(item) in roleMenu[index]" :key="item.sysMenuVo.menuId" class="menu-item mb-10px">
            <div class="menu-title">
              <div v-for="(nameChart) in item.sysMenuVo.menuName" :key="nameChart">
                {{ nameChart }}
              </div>
            </div>
            <div class="menu-perms">
              <div class="mb-5px">
                <a-checkbox :checked="item.queryCheckedList.length === item.queryList.length && item.queryList.length > 0" :indeterminate="item.queryCheckedList.length < item.queryList.length && item.queryCheckedList.length > 0" @change="(e) => queryCheckBoxChange(e, item)">
                  查看权限
                </a-checkbox>
                <a-divider style="margin: 15px 0px;" />
                <a-checkbox-group v-model:value="item.queryCheckedList">
                  <template v-for="(queryItem) in item.queryList" :key="queryItem.menuId">
                    <a-checkbox :value="queryItem.menuId">
                      {{ queryItem.menuName }}
                    </a-checkbox>
                  </template>
                </a-checkbox-group>
              </div>
              <div>
                <a-checkbox :checked="item.operateCheckedList.length === item.operateList.length && item.operateList.length > 0" :indeterminate="item.operateCheckedList.length < item.operateList.length && item.operateCheckedList.length > 0" @change="(e) => operateCheckBoxChange(e, item)">
                  操作权限
                </a-checkbox>
                <a-divider style="margin: 15px 0px;" />
                <a-checkbox-group v-model:value="item.operateCheckedList">
                  <template v-for="(operateItem) in item.operateList" :key="operateItem.menuId">
                    <a-checkbox :value="operateItem.menuId">
                      {{ operateItem.menuName }}
                    </a-checkbox>
                  </template>
                </a-checkbox-group>
              </div>
            </div>
          </div>
          <div v-if="!roleMenu[activeTabs] || roleMenu[activeTabs].length === 0" class="text-center p-40px">
            <bh-empty description="暂无数据" />
          </div>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<style scoped lang='less'>
:deep(.role-auth){
  .ant-tabs-nav:before{
    border-bottom: 0px;
  }
}
.select-content{
  .menu-item{
    display: flex;
    align-items: stretch;
    .menu-title{
      width: 45px;
      align-items: center;
      justify-content: center;
      display: flex;
      flex-direction: column;
      background: var(--bh-color-f5);
      border-radius: 8px;
      margin-right: 5px;
      flex-shrink: 0;
    }
    .menu-perms{
      flex: auto;
      >div{
        background: var(--bh-color-fc);
        border-radius: 8px;
        padding: 20px;
      }
    }
  }
}
</style>
